<template>
    <div id="shop">
        <mt-header fixed :title="shopData.statusName+'超市'">
            <span slot="left">
                <mt-button icon="back" @click.native="goB">返回</mt-button>
            </span>
            <router-link to="/car" slot="right">
                <mt-button>我的购物车</mt-button>     
            </router-link>
        </mt-header>
        <!-- 点餐区 -->
        <div class="myShop-content">
            
            <!-- 商家信息 -->
            <div class="shop-info-show">
                <p>商铺：{{shopData.sname}}</p>
                <p>地址：{{shopData.shopAddress}}</p>
                <p>电话：{{shopData.shopPhone}}</p>
            </div>

            <!-- 点餐 -->
            <mt-navbar v-model="selected" fixed>
                <mt-tab-item id="goods">点餐</mt-tab-item>
                <mt-tab-item id="boss">优惠卷</mt-tab-item>
            </mt-navbar>

            <mt-tab-container v-model="selected">
                <mt-tab-container-item id="goods">
                  <div class="goodWrap" v-getH>
                      <!-- 左边菜单栏 -->
                    <div class="leftMenu" ref="leftScroll" v-getH>
                        <ul>
                            <li v-for="(items, index) in shopData.goodMenu"
                             :key="index"
                            :class="{active: currentIndex === index}"
                            @click="clickLeftMenu(index, $event)">
                                {{ items.title}}
                            </li>
                        </ul>
                    </div>
                    <!-- 右边菜单栏 -->
                    <div class="rightMenu" ref="rightScroll" v-getH>
                        <ul>
                            <li v-for="(items, index) in shopData.goodMenu" :key="index" ref="rItem">
                                    <!-- 标题 -->
                                <div class="header-title">
                                    <p class="title">{{items.title}}</p>
                                </div>
                                <!-- 图片 信息列表区 -->
                                <div class="goodList" v-for="(item, i) in items.data" :key="i">

                                    <!-- 图片 以及食材信息 -->
                                    <div class="top">
                                        <!-- 图片 -->
                                        <div class="shop-img" @click.stop="readImg(index, i)">
                                            <img :src="item.foodImgs[0]">
                                        </div>
                                        <!-- 列表信息 -->
                                        <div class="shop-info" @click="toFoodMsg(index, i)">                                                                                   <!-- 菜名 -->
                                            <div class="shop-name">
                                                <h1 class="nowrap">{{item.foodName}}</h1>                         
                                            </div>
                                            <!-- 说明 -->
                                            <div class="shop-commit nowrap">{{item.foodDsec}}</div>
                                            <!-- 销售额 以及好评率 -->
                                            <div class="shop-msg">
                                                <!-- 销售额 -->
                                                <span>月销售 {{item.foodTotal}} 份</span>
                                                <span>好评率 {{item.foodCommitRate}}</span>
                                            </div>                                      
                                        </div> 
                                    </div> 
                                    <!-- 价格 以及添加减 -->
                                    <div class="buttom">
                                        <div class="shop-price-ad">
                                            <p class="shop-price">￥{{item.foodPrice}}</p>
                                            <div class="shop-option">
                                                <span :class="{disable: item.foodCount <=0}" @click.stop="decr(item, index, i)">-</span>
                                                <span>{{item.foodCount}}</span>
                                                <span @click.stop="incr(item, index, i)">+</span>
                                            </div>                                           
                                        </div>                                 
                                    </div>
                                </div>
                            </li>
                             <!-- 解决better-scroll滑动问题 -->
                            <li v-getLiH></li>
                        </ul>
                    </div>
                    <!-- 空空如也 -->
                    <div class="emplty-con" v-if="shopData.goodMenu.length === 0">
                        <div class="emplty">
                            <div>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-meiyoushangpin"></use>
                                </svg>
                            </div>
                            <div style="color: #141414;" class="text">
                                没有商品
                            </div>
                        </div>
                    </div>
                  </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="boss">
                     <div class="bossWrap" v-getH>
                        <!-- 优惠卷界面 -->
                         <div class="boss-coupon-list" ref="bossCoupon">
                            <div class="coupon-list">
                                <!-- 如果优惠卷状态为 -1 就不显示 -->
                                <div  v-for="(item, index) in couponMenu" :key="index">
                                    <mt-cell
                                        :title="item.msg"
                                        is-link
                                        v-if="item.couponStatus != 3"
                                        >

                                        <span class="icon">
                                            <mt-button type="danger" @click.native.self="getToCoupon(index)" v-if="item.couponStatus === 0" size="small">领取</mt-button>
                                            <mt-button  v-else size="small" disabled>已领取</mt-button>
                                        </span>
                                    </mt-cell>                                                                                                                         
                                </div>
                            </div>
                        </div>
                         <!-- 空空如也 -->
                        <div class="emplty-con" v-if="couponMenu.length === 0">
                            <div class="emplty emplty-cneter">
                                <div>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-youhuijuan-weikaitong"></use>
                                    </svg>
                                </div>
                                <div style="color: #141414;" class="text">
                                    没有优惠劵呢
                                </div>
                            </div>
                        </div>
                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="goodInfo">
                   <div class="goodInfoWrap"  v-getH>
                       <div class="good-info"  ref="goodInfoScroll">
                           <div class="good-info-list">
                                <div class="sell-title">{{currentFood.foodName}}</div>
                                <div class="sell-info">
                                    <!-- 标题 -->
                                    <div class="title">
                                        <div class="name">
                                        销售情况
                                        </div>

                                        <!-- 价格 以及添加减 -->
                                        <div class="shop-price-ad">
                                            <p class="shop-price">￥{{currentFood.foodPrice}}</p>
                                            <div class="shop-option">
                                                <span @click="decr(currentFood)">-</span>
                                                <span>{{currentFood.foodCount}}</span>
                                                <span @click="incr(currentFood)">+</span>
                                            </div>                                           
                                        </div>
                                    </div>
                                    <div class="sell-content">
                                        <p>月销售 {{currentFood.foodTotal}} 份</p>
                                        <p>好评率 {{currentFood.foodCommitRate}}</p>
                                    </div>
                                </div>

                                <div class="sell-decr">
                                    <div class="title">
                                        <div class="name">商家描述</div>
                                    </div>
                                    <div class="sell-content">
                                        <p>
                                            {{currentFood.foodDsec}}
                                        </p>
                                    </div>
                                </div>

                                <div class="sell-commit">
                                    <div class="title">
                                        <div class="name">用户评论</div>
                                    </div>
                                    <div class="sell-content" v-for="(item, index) in currentFood.foodCommit" :key="index">
                                        <div>
                                            <div class="hImg">
                                                <img :src="item.commitHImg">
                                            </div>
                                            <div class="info">
                                                <p class="uname">
                                                    {{item.commitName}}:
                                                    <span>{{item.commitRate}}</span>
                                                </p>
                                                <p class="commit">
                                                   {{item.commit}}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 没有评论 -->
                                    <div class="noCommit" v-if="currentFood.foodCommit&&currentFood.foodCommit.length === 0">暂无评论</div>
                                </div>
                           </div>
                       </div>
                   </div>
                </mt-tab-container-item>
            </mt-tab-container>
        </div>

        
        <!-- 购物车区域 -->
        <div class="car-content" v-if="shopData.goodMenu.length > 0">
            <div class="content">
                <div class="car-img">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kongkongruye"></use>
                    </svg>
                </div>
                <div class="car-mon" @click.stop="() =>{showOrder = !showOrder}">
                    ￥<span>{{totalPrice}}</span>
                </div>
                <div class="car-option">
                    <mt-button type="danger" size="large" @click="addCar">加入购物车</mt-button>
                </div>
            </div>
        </div>
       <transition name="order">
            <div class="order-option" v-if="showOrder">
                <!-- 这里也可以增加减 -->
                <div class="order-list" v-for="(item, index) in shopList" :key="index">
                    <div class="name">{{item.foodName}}</div>
                    <div class="price">￥{{totalPrice}}</div>
                    <div class="option">
                        <p :class="{disable: item.foodCount <=0}" @click.stop="decr(item)">-</p>
                        <p>{{item.foodCount}}</p>
                        <p @click.stop="incr(item)">+</p>
                    </div>
                </div>

                <div v-show="shopList.length===0" class="order-no">
                    <p>空空如也</p>
                </div>
            </div>
       </transition>
        <!-- 图片预览 -->
        <div class="read-img" v-if="isReadImg">
            <mt-header fixed :title="currentFood.foodName">
                <span slot="left">
                    <mt-button icon="back" @click.native="() =>{setState({isReadImg: false})}">返回</mt-button>
                </span>
                <span slot="right">
                    <mt-button @click.native="">详情...</mt-button>
                </span>
            </mt-header>
             <!-- 价格 以及添加减 -->
            <div class="shop-price-ad">
                <p class="shop-price">￥{{currentFood.foodPrice}}</p>
                <div class="shop-option">
                    <p :class="{disable:currentFood.foodCount <=0}" @click.stop="decr(currentFood)">-</p>
                    <p>{{currentFood.foodCount}}</p>
                    <p @click.stop="incr(currentFood)">+</p>
                </div>
            </div>

              <div class="read-content">
                <mt-swipe :auto="0">
                    <mt-swipe-item v-for="(item, index) in currentFood.foodImgs" :key="index">
                        <img :src="item">
                    </mt-swipe-item>
                </mt-swipe>
            </div>
        </div>
    </div>
</template>
<script>
import Bscroll from 'better-scroll'
import axios from 'axios'
import{mapState, mapMutations, mapActions} from 'vuex'
import { MessageBox, Indicator } from 'mint-ui'
export default {
    data(){
        return {

            topHeight: 210,//除了商品列表上面的高度
            selected: 'goods',//选择是店铺 还是商家
            
            //这是 滑动数据
            rItem: null,//右菜单DOM元素
            scrollY: 0,//获取实时滚动位置
            heightLi: [],//获取每一个li的高度

            //商店数据
            shopData: [],//包括电话还有 地址，想要浏览哪个商品，就传入该商品的index即可
            //食材总价格
            totalPrice: sessionStorage.getItem('totalPrice') ? 
                                JSON.parse(sessionStorage.getItem('totalPrice')) : 0,
            //购物清单
            shopList: sessionStorage.getItem('shopList') ? 
                                JSON.parse(sessionStorage.getItem('shopList')) : [],
            //购物清单 [],
            //这个数据才是加入购物车的时候 用的数据
            carList: sessionStorage.getItem('shopList') ? 
                                JSON.parse(sessionStorage.getItem('shopList')) : [],
            //是否显示 清单列表
            showOrder: false,
        }
    },
    inject: ['reload', 'goB'],
    //生命周期函数
    created(){
        //获取传过来的 index  该index就是获取当前点击的食物  此时通过路由有没有home 有即为首页传过来的
        if( this.$route.params.home) this.setState({readIndex: this.$route.params.index})
                
        this.shopData = this.homeShopList[this.readIndex]


        // //拿取优惠劵
        this.takeCoupon({
            couponId: this.shopData.shopId,
            couponSign: this.shopData.shopId +'-'+ this.storeFlag
        }).then((data) =>{
            this.setState({couponMenu: data})
        }, () =>{
            this.setState({couponMenu: []})
        })
        

        this.$nextTick(() =>{
            if(!this.$refs.rightScroll) return
            this._scrollInit()
            this.getLiHeight()
        })

        // 发送请求 这里获取商店数据  赋值
    },

    computed:{        
        ...mapState([
            'storeFlag',
            'uname',
            'sname',
            'shopAddress',
            'shopPhone',
            'statusName',
            'goodMenu',
            'isReadImg',
            'homeShopList',
            'currentFood',
            'carMenu',
            'readIndex',
            //优惠卷
            'couponMenu',
            'myCouponMenu',//我的优惠劵
            //前往某条食材的数据索引
            'foodTypeIndex',
            'carTotal'
        ]),

        currentIndex(){
            const {scrollY, heightLi} = this

            let index = heightLi.findIndex((item, index) =>{
                return scrollY >= heightLi[index] && scrollY < heightLi[index + 1]
            })
            return index > 0 ? index: 0
        }
    },
    watch: {
         totalPrice(val, oldVal){
             sessionStorage.setItem('totalPrice', JSON.stringify(val))
         },
        //购物清单
        shopList(val, oldVal){
            sessionStorage.setItem('shopList', JSON.stringify(val))
        },
        //这个数据才是加入购物车的时候 用的数据
        carList(val, oldVal){
            sessionStorage.setItem('carList', JSON.stringify(val))
        }
    },
    //方法
    methods:{
        ...mapMutations([
            'setState',
            'setToast',
            'setIndicator',//加载图标
        ]),
        ...mapActions([
            'getShopInfo',//拿取数据
            'sendCoupon',//领取优惠卷
            'takeCoupon',
            'changeGoodInfo'//修改goodMenu的data里面的一些数据
        ]),


        //用户领取 优惠卷
        getToCoupon(index){

            // this.setIndicator('')
            //简单的对象克隆 this.couponMenu[index]领取的那张优惠劵
            const couponOne =JSON.parse(JSON.stringify(this.couponMenu[index]))
            /*
                此时 顾客领取的 uname不能直接 使用顾客的用户名存储
                因为当自己开店发优惠卷的时候uname就是自己的用户名 这样会冲突
                因此 后带个 -
            */
            const {uname, storeFlag, shopData} = this
            couponOne.couponId = storeFlag + '-'
            couponOne.uname = couponOne.uname
            couponOne.sname = couponOne.sname
            couponOne.couponSign = couponOne.couponSign + '-' + storeFlag
            couponOne.couponStatus = 1

            /*
                1 先发送保存当前的优惠劵
                2 在保存成功之后 发请求计算 已经获取的优惠劵
                
            */

            //保存自己的优惠劵
            this.sendCoupon({
                data: couponOne
            }).then(() =>{

                //此时需要 发请求设置已经获取的优惠劵
                this.takeCoupon({
                    couponId: shopData.shopId,
                    couponSign: shopData.shopId +'-'+ storeFlag
                }).then((couponMenu) =>{
                    //领取成功
                    this.setState({couponMenu})

                    //此时追加到自己的优惠卷中
                    this.myCouponMenu.unshift(couponOne)

                    Indicator.close()
                }, () =>{
                    this.setMessage('领取失败')
                    Indicator.close()
                    //此时应该发送请求删除数据的内容
                })
            })    
        },


        //字符串去首位空格
        trime(str){
            return str.replace(/^\s+|\s+$/g,"")
        },

        //加入购物车
        addCar(){

            //此时清单为空 就提示添加清单
            if(this.carList.length <=0){
                return this.setToast('您当前的菜单为空')
            }

            this.setToast('成功加入购物车，可前往购物车结算')



            //获取当前下单的数量
            //因为增加 减的不是carList 而是shopList 
            //carList只不过是购物车需要的数据  shopList包含了图片等信息 不需要那么多
            this.shopList.forEach((item,index) =>{
                this.carList[index].foodCount = item.foodCount
            })

            const { carMenu} = this
            //dataList  是新的加入购物车数据
            const dataList = this.arrClone(this.carList)
            //这里也必须要的 此时当用户修改 用户名 或者商店名字的时候 这里不需要改了
            const orderUName = this.shopData.statusName
            const orderSName = this.shopData.sname
            //商店标志位  每条食材的标识位在 数组克隆里面 添加了 但是 只有新添加购物车的的才需要添加
            // const selectFlag = false



            //寻找之前有没有在这家商店添加过东西 有则修改 否则 新添加 -1
            const i = carMenu.findIndex((value, index, arr) =>{
                return value.orderId === this.shopData.shopId//用id名字 因为名字会自己改变
            })

            //新添加 就直接放在 购物车里面 
           if(i === -1){
               return carMenu.unshift({
                   selectFlag: false,
                   orderUName,
                   orderSName,
                   orderId: this.shopData.shopId,//用于筛选优惠劵 以及 判断是否跨商店点击购物车的食材
                   dataList
               })
           }
           

           //否则已经存在  不是新添加的  说明之前就存在  与之前的合并  在去重的就可以了

            //不管商家是否修改用户名或者商店名 在这里都修改因此就同步当前商店了
            carMenu[i].orderUName = orderUName
            carMenu[i].orderSName = orderSName

            let newCarMenu = []
            let total = 0
            //克隆一份carMenu[i].dataList
            let cloneDataList = carMenu[i].dataList.slice(0)
            //这里判断 当前食材是否选中
            const flag = carMenu[i].selectFlag
            
            dataList.forEach(item =>{
                 //此时需要判断 foodId是否相同 不相同返回 -1 否则返回具体索引
                const key = carMenu[i].dataList.findIndex(val =>{
                    return item.foodId === val.foodId //根据foodId获取
                })

                //不相同  把新的添加到 newCarMenu中
                if(key === -1) return newCarMenu.push(item)

                //相同 进行操作
                    //1 把当前的carMenu[i].dataList 子选项相同的置为1使用克隆的操作 
                    // 2 判断当前食材在之前的购物车是否选中 
                        //  如果选中  就需要计算当前加入购物车食材的价钱之和 之后在把他与之前购物车求和
                            //并且当前的食材selectFlag设置为true 否则不进行操作
                    // 3 求当前食材的数量 与 之前的数量和
                

                //1
                cloneDataList[key] = 1

                // 2
                //先保存一份即将加入购物车食材的数量
                const num = item.foodCount
                //求总数量
                item.foodCount += carMenu[i].dataList[key].foodCount

                //当前食材不选中 就不要进行下面的操作了 没必要计算价格 push到newCarMenu中 
                if(!carMenu[i].dataList[key].selectFlag) return newCarMenu.push(item)

                //计算当前食材的价格
                total += num*item.foodPrice
                //selectFlag职位true
                item.selectFlag = true
                //把它push到newCarMenu中
                newCarMenu.push(item)
            })

            //此时遍历 cloneDataList找到不为1的 此时newCarMenu 即为我们想要的新数据
            // newCarMenu = newCarMenu.concat( cloneDataList.filter(item => item != 1))
            //把它覆盖到carMenu[i]
            this.carMenu[i].dataList = newCarMenu.concat( cloneDataList.filter(item => item != 1))

            
            parseFloat(total.toFixed(2)) !=0 && this.setState({carTotal: this.carTotal + parseFloat(total.toFixed(2))})


            return  
            //上面的做法是后面想到的 下面的是之前的做法 (下面不必理会)

              /*
            去重复的食材   相同的就把 它的数量 加在一起 组合成 一条新的数据
                一 遍历新添加的 dataList 这是一种去重的方式 但是比较难实现
                    1 如果之前购物车已经存在该食材 获取数量 加上最新的数量得到总数量
                    2 如果之前购物车已经存在 但是现在没有，则追加到dataList后面
                    3 如果之前购物车没有，但是现在有了，则不变

                 二 如果把新的dataList追加到之前购物车的dataList中  此时只要遍历购物车的dataList即可
                    1 如果之前购物车已经存在该食材 获取数量 加上最新的数量得到总数量
                    2 如果之前购物车已经存在 但是现在没有，则追加到dataList后面
                    3 如果之前购物车没有，但是现在有了，则不变
           */
            //合并dataList 谁调用谁在后面
            carMenu[i].dataList = dataList.concat(carMenu[i].dataList)

            carMenu[i].dataList.map((value, index) =>{               
                carMenu[i].dataList.map((val, key) =>{
                    if(index === key) return
                    if(value.foodName === val.foodName){
                        value.foodCount += val.foodCount
                        console.log(value)
                        console.log(val)
                        carMenu[i].dataList.splice(key, 1)
                    }
                })
            })             
        },

        //数量减少
        decr(data, index, i){
           
           data.foodCount--
            
            if(data.foodCount <= 0){
               const i = this.shopList.findIndex((value, index, arr) => {
                   return value.foodCount <= 0
               })

               this.shopList.splice(i, 1)
               this.carList.splice(i, 1)
           }

           if(data.foodCount < 0){
               return data.foodCount = 0
           }

           this.totalPrice -= parseFloat(data.foodPrice)
           this.totalPrice = parseFloat(this.totalPrice.toFixed(2))
        },

        //数量增加
        incr(data, index, i){
           if(!(index>= 0)){
               index = this.foodTypeIndex
           }
           if(data.foodCount <=0){
               
               this.shopList.unshift(data)

               //这里购物车需要什么数据 就从这里拿取即可
               const { foodCount, foodName, foodPrice, foodId} = data
               
               this.carList.unshift({
                   foodCount,
                   foodName,
                   foodPrice,
                   foodId,
                   title: this.shopData.goodMenu[index].title
               })
           }

           data.foodCount++
      
           this.totalPrice += parseFloat(data.foodPrice)
           this.totalPrice = parseFloat(this.totalPrice.toFixed(2))
        },

        //图片预览
        readImg(foodIndex, index){
            //此时图片预览不再是从goodMenu里面获取 而是当前浏览的商店的goodMenu获取
            this.setState({
                isReadImg: true,
                currentFood: this.shopData.goodMenu[foodIndex].data[index],
                foodTypeIndex: foodIndex
            })
        },

        //数组深度拷贝
        arrClone(arr){

            let newArr = []
            
            for(let item of arr){	

                let newObj = {}
                for(let key in item){												
                    
                    if (Object.prototype.toString.call(item[key]) === "[object Array]") {
                        
                        newObj[key] = item[key].slice(0)							
                                                                                                            
                    }else{
                        //如果不是数组 就直接push
                        newObj[key] = item[key]
                        //这里是特例 给每一个 对象添加一个标识符
                        newObj.selectFlag = false							
                    }						
                }
                newArr.push(newObj)	
                
            }


            return newArr

        },
        //前往食材查看详情
        toFoodMsg(foodIndex, index){
            this.selected = 'goodInfo'
            this.setState({
                currentFood: this.shopData.goodMenu[foodIndex].data[index],
                foodTypeIndex: foodIndex
            })
        },
        
        //初始化better-scroll
        _scrollInit(){
            //获取 DOM
             this.rItem = this.$refs.rItem
            //开启点击事件
            //点餐
            this.leftScroll = new Bscroll(this.$refs.leftScroll, { click: true})
            this.rightScroll = new Bscroll(this.$refs.rightScroll, { probeType: 3, click: true})

            this.rightScroll.on('scroll', pos =>{
                this.scrollY = Math.abs(Math.round(pos.y))
            })
        },
        //获取右菜单每个li的高度
        getLiHeight(){
            if(!this.rItem) return
          
            let h = 0
            this.heightLi.push(h)
            
            this.rItem.forEach((li, index) => {
                h += li.clientHeight - 1
                this.heightLi.push(h)
            })

        },
        //点击左菜单，右菜单同步
        clickLeftMenu(index, ev){
            
            if(!ev._constructed) return
      
            const el = this.rItem[index]

            this.rightScroll.scrollToElement(el, 300)
        }
    },
    //指令
    directives:{
        //商品滚动的最大高度
        getH:{
             inserted: function (el, binding) {
                //  这里即为 减去 点餐区域的margin-top值 还有下面的购物车区域的高度
               el.style.height = (document.querySelector('html').clientHeight - 270) + 'px'
            }
        },
        getLiH:{
             inserted: function (el, binding) {
                  //  这里即为 减去 点餐区域的margin-top值 和 每条食材的标题高度值 还有下面的购物车区域的高度
               el.style.height = (document.querySelector('html').clientHeight - 350) + 'px'
            }
        }
    }
}
</script>

<style lang="less" scoped>
#shop{
    height: 100%;
    .myShop-content{
        height: 100%;
        .shop-info-show{
            position: fixed;
            top: 40px;
            width: 100%;
            height: 120px;
            background-color: #49CB5F;
            padding-left: 60px;
            
            P{
                font-size: 22px;
                color: #fff;
                margin: 5px 0;
            }
        }
        //点餐区域
        .goodWrap{
            display: flex;
            margin-top: 220px;
            .leftMenu{
                flex: 2;
                overflow: hidden;
                margin-right: 5px;
                ul{
                    // background: #fff;
                    li{
                        position: relative;
                        padding: 15px 0;
                        font-size: 18px;
                        color: #666;
                        text-align: center;
                        border-bottom: 1px solid #ccc;
                    }
                   .active{
                       position: relative;
                        background: #49CB5F;
                        color: #fff;                     
                   }
                }
            }
            .rightMenu{
                flex: 5;
                overflow: hidden;
                ul{
                    li{
                        // 标题
                       .header-title{
                           display: flex;
                           justify-content: space-around;
                           border-bottom: 1px #ccc solid;
                           margin-bottom: 10px;
                           font-size: 20px;
                           padding: 9px 0;
                           .title{
                               flex: 1;
                                text-align: center;                             
                                color: #49CB5F;
                                // padding: 10px 0;
                           }
                            span{                               
                                margin-right: 10px;
                                font-size: 16px;
                                background: #49CB5F;
                                color: #fff;
                                width: 75px;
                                text-align: center;
                            }
                       }
                        //信息
                        .goodList{
                            display: flex;
                            flex-direction: column;
                            padding: 10px 0;
                            .top{
                                display: flex;                            
                                .shop-img{
                                    flex: 2;
                                    > img{
                                        width: 100%;
                                        height: 100%;
                                        max-width: 70px;
                                        max-height: 80px;
                                    }
                                }
                                .shop-info{
                                    flex: 5;
                                    padding-left: 10px;
                                    > div{
                                        margin-bottom: 5px;
                                    }
                                    .shop-name{
                                        display: flex;
                                        justify-content: space-between;
                                        color: #000;
                                        h1{
                                            font-size: 18px;
                                            font-weight: 700;
                                        }
                                        .food-dele-edit{
                                            display: flex;
                                            p{
                                                margin-right: 15px;
                                                font-size: 16px;
                                            
                                                background: #49CB5F;
                                                color: #fff;
                                                width: 40px;
                                                max-height: 24px;
                                                text-align: center;
                                            }
                                        }
                                    }
                                    .shop-commit{
                                        font-size: 15px;
                                        color: #666;
                                    }
                                    .shop-msg{
                                        color: #000;
                                    span{
                                        font-size: 12px;
                                    }
                                    span:last-child{
                                        margin-left: 5px;
                                    }
                                        
                                    }
                                }
                            }
                            .buttom{
                                padding: 5px 0;
                                .shop-price-ad{
                                    display: flex;
                                    justify-content: space-around;
                                    height: 25px;
                                    line-height: 25px;
                                    color:#000;
                                    .shop-option{
                                        // 商品增加减
                                        display: flex;
                                        > span{
                                            display: block;
                                            text-align: center;
                                            background: #49CB5F;
                                            border-radius: 50%;
                                            width: 25px;
                                            height: 25px;
                                            font-size: 18px;
                                            
                                            margin-left: 5px;
                                        }
                                        .disable{
                                            background-color: #72b124;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            //空空如也
            .emplty-con{
                height: 100%;
                width: 100%;
            }
        }
        //优惠劵区域
        .bossWrap{
            position: relative;
            overflow: hidden;
            .boss-coupon-list{
                position: absolute;
                width: 100%;
                height: 100%;
                overflow-y: auto;
            }
        }
    }
    //加入购物车区域
    .car-content{
        position: fixed;
        bottom: 0px;
        left: 0px;
        height: 50px;
        width: 100%;
        background: #000;
        //内容区域
        .content{
             display: flex;
             height: 100%;
             line-height: 50px;

            .car-img{
                width: 50px;
                > svg{
                    height: 80%;
                    width: 100%;
                    padding: 10% 2%; 
                }
            }
            .car-mon{
                flex: 2;
                text-align: center;
                font-size: 20px;
                color: red;
            }
            .car-option{
                flex: 1;
                display: flex;
                justify-content: flex-end;
               .mint-button {
                   height: 100%;
                   font-size: 12px;
                   border-radius: 0;
               }
            }
        }
    }
    //清单区域
    .order-option{
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 50px;
        background-color: rgba(0,0,0,.6);
        padding: 5px 0;
        > .order-list{
            display: flex;
            justify-content: space-around;   
            height: 30px;
            line-height: 30px;
            margin-bottom: 7px;        
            > div{
                flex: 1;
                text-align: center;
                color: #49CB5F;
            }
            .option{
                display: flex;
                p{
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    background-color: #49CB5F;
                    color: #000;
                    margin: 0 3px;
                }
            }
        }
        > .order-no{            
            p{
                font-size: 20px;
                text-align: center;
                color: #49CB5F;
            }
        }
    }
    //图片预览
    .read-img{
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        background-color: rgba(0,0,0, 0.7);
        z-index: 10000;
        .read-content{
            flex: 1;
            width: 100%;
            margin-top: 20px;
            height: 220px;
            img{
                width: 100%;
            }
        }

        .shop-price-ad{
            display: flex;
            justify-content: space-around;
            height: 50px;
            line-height: 50px;
            margin-top: 50px;
            .shop-price{
                flex: 1;
                font-size: 33px;
                text-align: right;
                color: #c4d08b;
            }
            .shop-option{
                flex: 1;
                display: flex;
                margin-left: 20px;
                padding-top: 2px;
                p{
                    width: 40px;
                    height: 40px;
                    font-size: 30px;
                    line-height: 40px;
                    text-align: center;
                    margin: 0 5px;
                    background-color: #49CB5F;
                    border-radius: 50%;
                }
                .disable{
                    background-color: #72b124;
                }
            }
        }
    }
}


.mint-navbar.is-fixed {
    top: 160px;    
}

//这里是 列表清单的动画
.order-enter,
.order-leave-to{
    opacity: 0;
    transform: translateY(100%)
}

.order-enter-active,
.order-leave-active{
    transition: all 0.5s;
}

</style>

